// Style ddwtos content a bit. Almost all these styles are copied from Moodle.
addon-qtype-ddwtos {
    .qtext {
        margin-bottom: 0.5em;
        display: block;
    }

    .draghome {
        margin-bottom: 1em;
        max-width: calc(100%);
    }

    .answertext {
        margin-bottom: 0.5em;
    }

    .drop {
        display: inline-block;
        text-align: center;
        border: 1px solid $gray-darker;
        margin-bottom: 2px;
        border-radius: 5px;
    }
    .draghome, .drag {
        display: inline-block;
        text-align: center;
        background: transparent;
        border: 0;
        white-space: normal;
        overflow: visible;
        word-wrap: break-word;
    }
    .draghome, .drag.unplaced{
        border: 1px solid $gray-darker;
        border-radius: 5px;
    }
    .draghome {
        visibility: hidden;
    }
    .drag {
        z-index: 2;
        border-radius: 5px;
        line-height: 25px;
    }
    .drag.selected {
        z-index: 3;
        box-shadow: $core-dd-question-selected-shadow;
    }

    .drop.selected {
        border-color: $yellow-light;
        box-shadow: 0 0 5px 5px $yellow-light;
    }

    &.notreadonly .drag,
    &.notreadonly .draghome,
    &.notreadonly .drop,
    &.notreadonly .answercontainer {
        cursor: pointer;
        border-radius: 5px;
    }

    &.readonly .drag,
    &.readonly .draghome,
    &.readonly .drop,
    &.readonly .answercontainer {
        cursor: default;
    }

    span.incorrect {
        background-color: $red-light;
        @include darkmode() {
            background-color: $red-dark;
        }
    }
    span.correct {
        background-color: $green-light;
        @include darkmode() {
            background-color: $green-dark;
        }
    }

    @for $i from 0 to length($core-dd-question-colors) {
        .group#{$i + 1} {
            background: nth($core-dd-question-colors, $i + 1);
            color: $text-color;
        }
    }

    sub, sup {
        font-size: 80%;
        position: relative;
        vertical-align: baseline;
    }
    sup {
        top: -0.4em;
    }
    sub {
        bottom: -0.2em;
    }
}

addon-qtype-ddwtos .item-md .draghome {
    max-width: calc(100% - #{($item-md-padding-start)});
}

addon-qtype-ddwtos .item-ios .draghome {
    max-width: calc(100% - #{($item-ios-padding-start)});
}

addon-qtype-ddwtos .item-wp .draghome {
    max-width: calc(100% - #{($item-wp-padding-start)});
}
